<template>
  <div class="test">
    <input
      type="text"
      v-model="msg"
    />
    <input
      type="button"
      value="changeObj"
      @click="handleChangeObj"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: 'hello vue',
      obj: {
        name: 'fly',
        age: 18
      }
    }
  },
  methods: {
    handleChangeObj() {
      this.obj.name = 'zs'
    }
  },
  watch: {
    msg(newVal, oldVal) {
      console.log(newVal, oldVal)
    },
    // obj(newVal, oldVal) {
    //   console.log(newVal, oldVal)
    // }
    obj: {
      handler(newVal, oldVal) {
        console.log(newVal, oldVal)
      },
      // 开启深度监听
      deep: true
    }
  }
}
</script>
<style lang="scss"></style>
